function Tab(){}

// 1. 初始化
Tab.prototype.init = function(btns,contents){
      // 1. 需要什么数据获取什么数据;
      // 2. 验证数据; 参数验证;
      // 3. 调用核心功能;
      this.btns = btns;
      this.contents = contents;
      this.index = 0;
      this.bindEvent();
}

// 2. 绑定事件;
Tab.prototype.bindEvent = function(){
      for(var i = 0 , ele ; ele = this.btns[i]; i ++){
            // i 就是当前元素的index ? true;
            ele.addEventListener("mouseenter",this.getIndex.bind(this,i));
            ele.addEventListener("mouseenter",this.showTab.bind(this));
      }
}

// 3. 获取下标;
Tab.prototype.getIndex = function(index){
      // this => ele; = 更改 > this => tab;
      // console.log(index);
      // 期中一个原型上的方法，想在另外一个原型上使用。
      this.index = index;
     
}
// 4. 展示对应的内容;
Tab.prototype.showTab = function(){
      // console.log(this.index);
      for(var i = 0 , ele;ele =  this.contents[i];i++ ){
            if(i == this.index){
                  ele.style.display = "block";
                  continue;
            }
            ele.style.display = "none"
      }
}

var btns = document.getElementsByTagName("li");
var contents = document.getElementsByClassName("video-box");

var tab = new Tab();
tab.init(btns,contents);
